<template>
  <ElTooltip
    effect="light"
    trigger="hover"
    :popper-class="popperClass"
    :placement="placement"
    :show-arrow="true"
    :content="content"
    :show-after="300"
    :hide-after="0"
    :disabled="disabled"
    :enterable="false"
  >
    <slot v-if="hasSlot"></slot>
    <span v-else></span>
  </ElTooltip>
</template>

<script lang="ts">
  import type { PropType } from 'vue';
  import { computed, defineComponent, getCurrentInstance } from 'vue';

  import { TooltipEnum } from '@/enums/index';

  type Placement =
    | 'top'
    | 'top-start'
    | 'top-end'
    | 'bottom'
    | 'bottom-start'
    | 'bottom-end'
    | 'left'
    | 'left-start'
    | 'left-end'
    | 'right'
    | 'right-start'
    | 'right-end';

  export default defineComponent({
    name: 'CsTooltip',
    props: {
      content: {
        type: String,
        default: '',
      },
      placement: {
        type: String as PropType<Placement>,
        default: 'top',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    setup(_, context) {
      const { slots } = context;
      const instance = getCurrentInstance();
      const hasSlot = computed(() => {
        const arr = slots.default?.() || [];
        const len = arr.length;

        if (len && len > 1) {
          const { name, __name } = instance?.parent?.type || {};
          console.error(`A tooltip can have only one root node at ${name || __name}.vue`);
        }

        return Boolean(len);
      });
      const popperClass = computed(() => {
        return TooltipEnum.POPPER_CLASS;
      });

      return { hasSlot, popperClass };
    },
  });
</script>

<style></style>
